<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="change()">点击存储信息</button>
    {{currVal}}
  </div>
</template>

<script>
  import { mapActions } from 'vuex';
  import { mapState } from 'vuex';

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      currVal:"123",
      indexNum:1
    }
  },
  created(){
    // console.log(this.$store.state)
  },
  watch: {
    pathName(currVal) {
      console.log("bianle ")
      // 监听mapState中的变量，当数据变化（有值、值改变等），
      // 保证能拿到完整的数据，不至于存在初始化没有数据的问题，然后可以赋给本组件data中的变量
      this.currVal = currVal;
    }
  },
  computed: {
    ...mapState(['pathName']),
  },
  methods:{

    ...mapActions(['savePath']),

    change(){
      // this.$store.state.pathName = "456123"
      console.log("前 ：",this.$store.state.pathName)
      this.indexNum = this.indexNum + 1
      this.savePath(this.indexNum +'')
      console.log("后 ：",this.$store.state.pathName)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
